<template>
  <view class="page">
    <view class="header" :style="'background-image: url('+pageBg+');'">
      <view class="navbar">
        <u-navbar :fixed="false" leftIcon=" " :autoBack="false" title="我的" placeholder bgColor="transparent"></u-navbar>
      </view>
      <view class="my-info">
        <view class="edit" @click="jumpTo('/pages/userInfo/userInfo')">
          <image style="width: 24rpx;height: 24rpx;flex-shrink: 0;" src="../../static/my/edit.png" />
          <text>编辑</text>
        </view>
        <image style="width: 140rpx;height: 140rpx;flex-shrink: 0;" :src="userInfo.avatar" mode="aspectFill" />
        <view class="">
          <view class="u-flex u-m-b-8">
            <text class="u-font-28 u-m-r-22">{{ userInfo.nickName }}</text>
            <template v-if="userInfo.postId == 2">
              <view class="partner" v-if="userInfo.partnerStatus == '0'">合伙人</view>
              <view class="partner" v-if="userInfo.partnerStatus == '1'">分公司</view>
            </template>
            <view class="partner" v-else-if="userInfo.postId == 3">团长</view>
            <image v-else-if="userInfo.postId == 4" style="width: 90rpx;height: 36rpx;flex-shrink: 0;" src="../../static/my/vip.png" />
          </view>
          <view class="u-font-24 u-m-b-8" style="color: #333333;">{{ userInfo.phonenumber }}</view>
          <view class="u-flex u-m-b-8" @click="copy" v-if="userInfo.postId != 103">
            <view class="u-font-24 u-m-r-12">邀请码：{{ userInfo.invitationCode }}</view>
            <image style="width: 24rpx;height: 23.69rpx;flex-shrink: 0;" src="../../static/my/copy.png" />
          </view>
        </view>
      </view>
    </view>
    <view class="wallet-card" :style="'background-image: url('+walletCard+');'" v-if="userInfo.postId != 103" @click="jumpTo('/pages/my/revenue')">
      <view class="u-flex u-row-between u-m-b-34">
        <view class="u-flex" style="color: #FCDDBA;">
          <image style="width: 24rpx;height: 24rpx;margin-right: 22rpx;" src="../../static/my/walletCardIcon.png" />
          <text class="u-m-r-14 u-font-28">可提现</text>
          <text class="u-font-36">¥ {{ ((incomeCountInfo.balance || 0) / 100).toFixed(2) }}</text>
        </view>
        <view class="withdraw-btn" @click.stop="realName">立即提现</view>
      </view>
      <view class="wallet-info">
        <view class="wallet-item">
          <view class="u-font-32" style="font-weight: 500;">¥ {{ ((incomeCountInfo.estimIncome || 0) / 100).toFixed(2) }}</view>
          <view class="u-font-20">今日预估</view>
        </view>
        <view class="wallet-item">
          <view class="u-font-32" style="font-weight: 500;">¥ {{ ((incomeCountInfo.thisMouth || 0) / 100).toFixed(2) }}</view>
          <view class="u-font-20">本月收益</view>
        </view>
        <view class="wallet-item" style="border: none;">
          <view class="u-font-32" style="font-weight: 500;">¥ {{ ((incomeCountInfo.lastMonth || 0) / 100).toFixed(2) }}</view>
          <view class="u-font-20">上月收益</view>
        </view>
      </view>
    </view>
    <view class="order-card">
      <view class="u-flex u-row-between u-m-b-32">
        <view class="u-flex">
          <view class="u-m-r-2" style="width: 8rpx;height: 32rpx;background: #53BE07;"></view>
          <view class="u-m-r-12" style="width: 2rpx;height: 32rpx;background: #53BE07;"></view>
          <view class="u-font-28">我的订单</view>
        </view>
        <view class="u-font-24" style="color: #56CB03;" @click="jumpTo('/pages/myOrder/myOrder')">查看全部</view>
      </view>
      <view class="u-flex">
        <view class="order-item" v-for="(item, index) in orderList" :key="index" @click="jumpTo('/pages/myOrder/myOrder?tabsCurrent='+item.tabsCurrent)">
          <u-badge max="99" absolute :offset="[-8,18]" :value="item.badge" style="z-index: 1;" bgColor="#E20300"></u-badge>
          <view class="u-m-b-12"><image style="width: auto;height: 32rpx;" :src="item.icon" mode="heightFix" /></view>
          <view class="u-font-24">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <view class="actions-card" v-if="userInfo.postId != 103">
      <view class="u-flex u-row-between u-m-b-32 u-p-l-18">
        <view class="u-flex">
          <view class="u-m-r-2" style="width: 8rpx;height: 32rpx;background: #53BE07;"></view>
          <view class="u-m-r-12" style="width: 2rpx;height: 32rpx;background: #53BE07;"></view>
          <view class="u-font-28">推广中心</view>
        </view>
      </view>
      <view class="u-flex" style="flex-wrap: wrap;gap: 34rpx 0;">
        <view class="action-item" v-for="(item, index) in getActionList()" :key="index" @click="jumpTo(item.path)">
          <view><image style="width: auto;height: 32rpx;" :src="item.icon" mode="heightFix" /></view>
          <view>{{ item.title }}</view>
        </view>
      </view>
    </view>
    <view class="actions-card">
      <view class="u-flex u-row-between u-m-b-32 u-p-l-18">
        <view class="u-flex">
          <view class="u-m-r-2" style="width: 8rpx;height: 32rpx;background: #53BE07;"></view>
          <view class="u-m-r-12" style="width: 2rpx;height: 32rpx;background: #53BE07;"></view>
          <view class="u-font-28">服务中心</view>
        </view>
      </view>
      <view class="u-flex" style="flex-wrap: wrap;gap: 34rpx 0;">
        <view class="action-item" v-for="(item, index) in getActionList1()" :key="index" @click="jumpTo(item.path)">
          <view><image style="width: auto;height: 32rpx;" :src="item.icon" mode="heightFix" /></view>
          <view>{{ item.title }}</view>
        </view>
      </view>
    </view>
    <customTabbar value="4" />
  </view>
</template>

<script>
import customTabbar from '../../components/customTabbar.vue'
import pageBg from '../../static/my/myBg.png'
import walletCard from '../../static/my/walletCard.png'
import { getOrderCount, incomeCount, getUserInfo } from '@/api/index'
import { utilWxLogin } from "@/common/util";

export default {
  components: {
    customTabbar,
  },
  data() {
    return {
      pageBg,
      walletCard,
      orderList: [
        {
          icon: '../../static/my/order1.png',
          title: '待付款',
          badge: 0,
          tabsCurrent: 1,
        },
        {
          icon: '../../static/my/order2.png',
          title: '待发货',
          badge: 0,
          tabsCurrent: 2,
        },
        {
          icon: '../../static/my/order3.png',
          title: '待收货',
          badge: 0,
          tabsCurrent: 3,
        },
        {
          icon: '../../static/my/order4.png',
          title: '已完成',
          badge: 0,
          tabsCurrent: 5,
        },
        {
          icon: '../../static/my/order5.png',
          title: '售后/退款',
          badge: 0,
          tabsCurrent: 4,
        },
      ],
      actionList: [
        {
          icon: '../../static/my/icon9.png',
          title: '我的推广',
          isRole: 'partner,member,leader',
          path: '/pages/my/promotion'
        },
        {
          icon: '../../static/my/icon10.png',
          title: '我的微信',
          isRole: 'partner,member,leader',
          path: '/pages/userInfo/wxCode'
        },
        {
          icon: '../../static/my/icon0.png',
          title: '团长招募',
          isRole: 'partner',
          path: '/pages/my/recruitment'
        },
        {
          icon: '../../static/my/icon2.png',
          title: '邀请好友',
          isRole: 'partner,member,leader',
          path: '/pages/my/invite'
        },
        {
          icon: '../../static/my/icon3.png',
          title: '素材中心',
          isRole: 'partner,member,leader',
          path: '/pages/my/materialCenter'
        },
        {
          icon: '../../static/my/icon4.png',
          title: '销售雷达',
          isRole: 'partner,member,leader',
          path: '/pages/my/mySales'
        },
      ],
      actionList1: [
        {
          icon: '../../static/my/icon1.png',
          title: '会员中心',
          isRole: 'common,member,leader',
          path: '/pages/activateMembership/activateMembership'
        },
        {
          icon: '../../static/my/icon5.png',
          title: '地址管理',
          isRole: 'common,partner,member,leader',
          path: '/pages/myAddress/myAddress'
        },
        {
          icon: '../../static/my/icon6.png',
          title: '我的收藏',
          isRole: 'common,partner,member,leader',
          path: '/pages/my/myCollection'
        },
        {
          icon: '../../static/my/icon7.png',
          title: '客服微信',
          isRole: 'common,partner,member,leader',
          path: '/pages/setting/callUs'
        },
        {
          icon: '../../static/my/icon8.png',
          title: '设置',
          isRole: 'common,partner,member,leader',
          path: '/pages/setting/setting'
        },
      ],
      userInfo: {
        roles: [],
      },
      incomeCountInfo: {
        balance: 0,
        estimIncome: 0,
        thisMouth: 0,
        lastMonth: 0,
      },
    };
  },
  async onLoad() {
    await utilWxLogin()
    if(this.userInfo.postId != 103) {
      this.getIncomeCount()
    }
  },
  async onShow() {
    if(!uni.getStorageSync('token')) {
      return
    }
    this.userInfo = uni.getStorageSync('userInfo')
    uni.showLoading({ mask: true })
    await getUserInfo({}).then(res => {
      uni.hideLoading()
      if(res.user) {
        uni.setStorageSync('userInfo', {...res.user, roles: res.roles})
        this.userInfo = {...res.user, roles: res.roles}
      } else {
        uni.removeStorageSync('token')
        uni.removeStorageSync('userInfo')
        uni.showToast({
          icon: 'none',
          title: '登录超时，请重新登录',
          success: () => {
            setTimeout(() => {
              uni.setStorageSync('noLogin', '果然年代')
              uni.reLaunch({
                url: '/pages/index/index'
              })
            }, 800)
          }
        })
      }
    })
    if(!this.userInfo && !this.userInfo.userId) {
      return
    }
    getOrderCount({ userId: this.userInfo.userId }).then(res => {
      this.orderList[0].badge = res.data.pendingPayment
      this.orderList[1].badge = res.data.toBeShipped
      this.orderList[2].badge = res.data.toBeReceived
    })
  },
  methods: {
    getIncomeCount() {
      incomeCount({ userId: this.userInfo.userId }).then(res => {
        this.incomeCountInfo = res.data
      })
    },
    realName() {
      const that = this
      if(!this.userInfo.phonenumber) {
        uni.showToast({
          icon: 'none',
          title: `请先绑定手机号`
        })
        setTimeout(() => {
          that.jumpTo('/pages/userInfo/userPhone')
        }, 1000)
        return
      }
      if(this.userInfo.verifiedStatus == '1') {
        this.jumpTo('/pages/my/withdraw')
      } else {
        this.jumpTo('/pages/my/realName')
      }
    },
    getActionList() {
      const role = this.userInfo.postCode;
      const roleActionList = this.actionList.filter(item => item.isRole.includes(role))
      if(roleActionList.length) {
        return roleActionList;
      } else {
        return this.actionList.filter(v => v.title != '团长招募')
      }
    },
    getActionList1() {
      const role = this.userInfo.postCode;
      const roleActionList = this.actionList1.filter(item => item.isRole.includes(role))
      if(roleActionList.length) {
        return roleActionList;
      } else {
        return this.actionList.filter(v => v.title != '团长招募')
      }
    },
    copy() {
      uni.setClipboardData({
        data: this.userInfo.invitationCode + '',
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .header {
    width: 100%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 750rpx 480rpx;
    background-position: bottom;
    padding-bottom: 20rpx;
    margin-bottom: 12rpx;
    .navbar {
      width: 100%;
      margin-bottom: 28rpx;
      background: rgba(255,255,255,0.6);
      backdrop-filter: blur(16rpx);
    }
    .my-info {
      background: rgba(255,255,255,0.6);
      backdrop-filter: blur(16rpx);
      width: 702rpx;
      margin: 0 auto;
      padding: 40rpx 24rpx;
      position: relative;
      display: flex;
      align-items: center;
      gap: 32rpx;
      .edit {
        position: absolute;
        top: 16rpx;
        right: 32rpx;
        font-size: 24rpx;
        image {
          vertical-align: middle;
          margin-right: 6rpx;
        }
      }
      .partner {
        width: 90rpx;
        height: 36rpx;
        background: #1D1610;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 20rpx;
        color: #FFD79F;
      }
    }
  }
  .wallet-card {
    width: 702rpx;
    height: 260rpx;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: 100% 260rpx;
    padding: 28rpx 24rpx;
    .withdraw-btn {
      width: 140rpx;
      height: 52rpx;
      line-height: 52rpx;
      text-align: center;
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      border: 2rpx solid #FCDDBA;
      font-size: 24rpx;
      color: #FCDDBA;
    }
    .wallet-info {
      height: 84rpx;
      display: flex;
      align-items: center;
      color: #FCDDBA;
      .wallet-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12rpx;
        height: 40rpx;
        border-right: 2rpx solid #FCDDBA;
      }
    }
  }
  .order-card {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 24rpx 18rpx;
    margin: 0 auto;
    margin-top: -30rpx;
    margin-bottom: 20rpx;
    .order-item {
      flex: 1;
      text-align: center;
      position: relative;
    }
  }
  .actions-card {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 24rpx 0;
    margin: 0 auto;
    margin-bottom: 20rpx;
    .action-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16rpx;
      font-size: 24rpx;
      image {
        width: auto;
        height: 44rpx;
      }
    }
  }
}
</style>
